<template>
  <div class="works">
    <div class="works-panel">
      <div class="menu-panel">
        <el-scrollbar class="menu-wrapper">
          <div class="menu-item" v-for="(t, i) in texts" :key="i">
            <div class="menu-title" @click="toggleIndex(i)">
              <div class="menu-text">{{ t.text }}</div>
              <div class="menu-sign" :class="{ 'menu-sign_open': t.open }">
                <i class="iconfont" :class="[t.open ? 'icon-minus' : 'icon-plus']"></i>
              </div>
            </div>
            <ul
              v-if="allWorks[i] && allWorks[i].length > 0"
              class="sub-menu"
              v-show="t.open"
              @click="selectMenu"
            >
              <li
                class="sub-menu-item"
                :class="{ 'submenu-active': (curr === j && i === currIndex) }"
                v-for="(s, j) in allWorks[i]"
                :key="s._id"
                :data-i="i + '_' + j"
              >{{ s.name }}</li>
            </ul>
          </div>
        </el-scrollbar>
      </div>
      <div class="dots-panel">
        <div class="dots-wrapper center">
          <div class="center-hack"></div>
          <div class="center-body" @click="toSubmenu">
            <div
              class="dot"
              v-for="item in menuLen"
              :key="item"
              :class="{ 'dot-active': (item - 1) === curr }"
              :data-i="(item - 1)"
            ></div>
          </div>
        </div>
      </div>
      <div class="image-panel">
        <div class="image-wrapper">
          <img :src="descImage" class="desc-image" v-show="descImage != ''" />
          <div class="show-imgae-panel" :class="'show-img-'+largeImageActive" v-show="images.length > 0">
            <div class="large-image-panel">
              <img :src="img" v-for="(img,i) in images" :key="i" class="large-image" :class="'large-image-'+i" >
            </div>
            <div class="small-image-panel">
              <div class="small-image-item" :class="'small-image-item-'+i" v-for="(img, i) in images" :key="i" @click="preview(i)">
                <img :src="img" class="small-image">
                <img src="../assets/work_images_line.png" class="image-btm">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ajax from '../req'

export default {
  name: 'Works',
  props: {
    index: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      allWorks: [],
      texts: [{
        text: '全案服务',
        open: false
      }, {
        text: '品牌服务',
        open: false
      }, {
        text: '产品服务',
        open: false
      }, {
        text: '传播服务',
        open: false
      }, {
        text: '装饰服务',
        open: false
      }],
      curr: 0,
      menuLen: 0,
      currIndex: 0,
      descImage: '',
      images: [],
      largeImageActive: 0
    }
  },
  created () { // 查询所有的菜单
    ajax.getJSON('/works_list', (err, res) => {
      if (!err) {
        if (res.code === 1) {
          var works = res.works
          this.currIndex = this.index
          this.texts[this.currIndex].open = true
          this.allWorks = Object.freeze(works)
          this.menuLen = works[this.currIndex].length
          if (this.menuLen > 0) {
            this.descImage = this.allWorks[this.currIndex][this.curr].descImage || ''
            this.images = Object.freeze(this.allWorks[this.currIndex][this.curr].images || [])
            this.largeImageActive = 0
          } else {
            this.images = []
            this.descImage = ''
            this.largeImageActive = 0
          }
        }
      }
    })
  },
  methods: {
    toggleIndex (index) {
      if (index !== this.currIndex) {
        if (this.allWorks[index].length > 0) {
          this.texts[index].open = !this.texts[index].open
        }
      }
    },
    selectMenu (e) {
      let datai = e.target.getAttribute('data-i')
      if (datai) {
        datai = datai.split('_')
        // 设置只有当前项展开, 其余项隐藏
        for (let i = 0; i < 5; i++) {
          if (i === Number(datai[0])) {
            this.texts[i].open = true
          } else {
            this.texts[i].open = false
          }
        }
        this.currIndex = Number(datai[0])
        this.curr = Number(datai[1])
        this.menuLen = this.allWorks[this.currIndex].length
        if (this.menuLen > 0) {
          this.descImage = this.allWorks[this.currIndex][this.curr].descImage
          this.images = Object.freeze(this.allWorks[this.currIndex][this.curr].images || [])
          this.largeImageActive = 0
        } else {
          this.images = []
          this.descImage = ''
          this.largeImageActive = 0
        }
      }
    },
    toSubmenu (e) {
      let datai = e.target.getAttribute('data-i')
      if (datai) {
        this.curr = Number(datai)
        this.descImage = this.allWorks[this.currIndex][this.curr].descImage
        this.images = Object.freeze(this.allWorks[this.currIndex][this.curr].images || [])
        this.largeImageActive = 0
      }
    },

    preview (i) {
      this.largeImageActive = i
    }
  }
}
</script>

<style lang="less">
.works {
  height: 100%;
  background: url("../assets/works_detail_bg.jpg") no-repeat;
  background-size: cover;
  padding-left:140px;
  padding-right:140px;

  .works-panel {
    //width: 75%;
    height: 100%;
  }

  .menu-panel {
    display: inline-block;
    width: 320px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    vertical-align: top;
    padding: 20px 10px;
  }
  .menu-wrapper {
    height: 100%;
  }
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .menu-item {
    border-bottom: 0.5px solid white;
    cursor: pointer;
  }
  .menu-title {
    width: 100%;
    overflow: hidden;
    height: 50px;
    color: white;
    line-height: 50px;
    font-size: 15px;
  }
  .menu-text {
    float: left;
  }
  .menu-sign {
    float: right;
  }
  .menu-sign_open {
    color: rgb(275, 173, 60);
  }
  .sub-menu {
    color: white;
    margin-bottom: 15px;
    padding-left: 2px;
    font-size: 12px;
  }

  .sub-menu-item {
    padding: 5px 0;
    transition: color 0.5s ease;

    &:hover {
      color: rgba(275, 173, 60, 0.5);
    }
  }

  .submenu-active {
    color: rgb(275, 173, 60);

    &:hover {
      color: rgb(275, 173, 60);
    }
  }

  .dots-panel {
    display: inline-block;
    width: 70px;
    height: 100%;
    vertical-align: top;
  }
  .dots-wrapper {
    height: 100%;
  }
  .dot {
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.5s ease;

    &:hover {
      background-color: rgba(275, 173, 60, 0.5);
    }

    &:not(:first-child) {
      margin-top: 5px;
    }
  }
  .dot-active {
    background-color: rgb(275, 173, 60);

    &:hover {
      background-color: rgb(275, 173, 60);
    }
  }

  .image-panel {
    display: inline-block;
    width: calc(100% - 320px - 70px -  30px);
    margin-left: 30px;
    height: 100%;
    vertical-align: top;
    font-size: 0;
    text-align:center;

    &::before {
      content: "";
      display: inline-block;
      width: 0;
      height: 100%;
      vertical-align: middle;
    }
  }

  .image-wrapper {
    vertical-align: middle;
    display: inline-block;
    text-align: center;
    overflow:hidden;
    max-width:210px + 670px;
  }
  .desc-image {
    width:23.8%;
    height: auto;
  }
  .show-imgae-panel {
    display: inline-block;
    width:calc(100% - 23.8%);
  }

  .large-image-panel {
    text-align: left;
    width:100%;
  }

  .large-image {
    width:100%;
    height:auto;
    display:none;
  }

  .small-image-panel {
    text-align: left;
    margin-top: 5px;
  }

  .small-image-item {
    width: calc((100% - 10px) / 3);
    text-align: center;
    display: inline-block;
    cursor:pointer;

    &:not(:first-child) {
      margin-left: 5px;
    }
  }

  .small-image {
    display:block;
    width: 100%;
    height: auto;
    transition:all 0.5s ease-in-out;
  }

  .image-btm-panel {
    text-align: center;
    margin-top: 5px;
  }

  .image-btm {
    display:block;
    width: 100%;
    margin-top:3px;
    height: 3px;
    opacity:0;
    transition:all 0.5s ease-in-out;
  }

  each(range(0, 3), {
    .show-img-@{value}{
      .large-image-@{value}{
        display:block;
        animation: show-animation 0.5s;
        -moz-animation: show-animation 0.5s;
        -webkit-animation: show-animation 0.5s;
        -o-animation: show-animation 0.5s;
      }
      .small-image-item-@{value}{
        .image-btm{
          opacity:1;
        }
      }
    }
  });

  @keyframes show-animation {
    0% {
      opacity: 1;
    }
    25% {
      opacity: 0.4;
    }
    50% {
      opacity: 0.8;
    }
    75% {
      opacity: 1;
    }
  }
}
@media screen and (max-width: 1366px) {
  .works {
    .image-wrapper {
      max-width: 600px;
    }
  }
}
</style>
